<!--
 * @Description: 
 * @Date: 2024-04-27 18:19:46
 * @LastEditTime: 2024-04-27 20:34:14
 * @FilePath: \yh_fe_db_portal\src\page\WorkspaceOld\Notebook\OpeCellList\variableDrawer.vue
-->
<template>
  <div class="dataStructure-wrap12">
    <el-drawer
      :append-to-body="true"
      title="变量定义"
      :visible.sync="visible"
      @closed="handleClose"
      ref="drawerRef"
      size="60%"
    >
      <!-- size="calc(100% - 200px)" -->
      <div class="var_table_wrap">
        <div class="tools">
          <el-button type="primary" @click="handleAdd">添加</el-button>
        </div>
        <el-table
          height="100%"
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          v-loading="tableLoading"
        >
          <el-table-column prop="var" label="变量名" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-input v-model="scope.row.var"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="cnName" label="中文名" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-input v-model="scope.row.cnName"></el-input>
            </template>
          </el-table-column>

          <el-table-column prop="type" label="类型" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-select v-model="scope.row.type" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>

          <el-table-column prop="default" label="默认值" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-date-picker
                v-model="scope.row.default"
                type="datetime"
                v-if="scope.row.type == 'date'"
                placeholder="选择时间"
              ></el-date-picker>
              <el-input v-model="scope.row.default" v-else></el-input>
            </template>
          </el-table-column>

          <el-table-column
            prop="description"
            label="描述"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <el-input v-model="scope.row.description"></el-input>
            </template>
          </el-table-column>

          <el-table-column
            prop="ifRequire"
            label="必填"
            width="55"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <el-checkbox v-model="scope.row.ifRequire"></el-checkbox>
            </template>
          </el-table-column>

          <el-table-column label="操作" show-overflow-tooltip width="170">
            <template slot-scope="scope">
              <el-button
                type="text"
                class="edit"
                @click="handlePaste(scope.row,scope)"
              >
                复制
              </el-button>
              <el-button
                type="text"
                class="del"
                @click="handleRowDel(scope.row, scope.$index)"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="var_footer">
          <el-button @click="handleCancel">取 消</el-button>
          <!-- <el-button type="primary" @click="$refs.drawer.closeDrawer()" :loading="loading">{{ loading ? '提交中 ...' : '确 定' }}</el-button> -->
          <el-button type="primary" @click="handleOk">确 定</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  name: 'variableDrawer',
  props: {
    datasourceId: {
      default: '26'
    },
    sql: {
      default: ''
    }
  },
  data () {
    return {
      options: [
        {
          label: '数值型',
          value: 'int'
        },
        {
          label: '日期型',
          value: 'date'
        },
        {
          label: '字符型',
          value: 'string'
        }
      ],

      tableLoading: false,
      tableData: [{}],
      retType: '1',
      visible: false,
      topoLoading: null,
      isloaded: true
    }
  },
  created () {},
  mounted () {
    this.visible = true
    // !this.isloaded &&
    //   this.$nextTick(() => {
    //     this.topoLoading = this.$loading({
    //       lock: true,
    //       target: this.$refs.drawerRef.$el.querySelector('.el-drawer__body')
    //     })
    //   })
  },
  methods: {
    handleAdd () {
      this.tableData.push({})
    },
    handlePaste (row) {
      this.tableData.push(JSON.parse(JSON.stringify(row)))
    },
    handleRowDel (row, i) {
      this.tableData.splice(i, 1)
    },
    handleCancel () {
      this.$emit('close')

    },
    handleOk () {
      this.$message.warning('接口开发中')
    },
    handleClose () {
      this.$emit('close')
    }
  }
}
</script>

<style lang="scss" scoped>
.var_table_wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  .tools {
    display: flex;
    justify-content: flex-end;
    padding-right: 20px;
    padding-bottom: 20px;

  }
}

.del,
.edit {
  padding: 0;
}
.var_table {
  flex: 1;
}
.var_footer {
  display: flex;
  padding: 20px;
  justify-content: flex-end;
}
</style>
